<template>
  <div class="home">
    <header class="header">
      <div class="logo">
        <h1>在线工具集</h1>
      </div>
      <nav class="nav">
        <router-link to="/" class="nav-item">首页</router-link>
        <router-link to="/file-convert" class="nav-item">文件转换</router-link>
        <router-link to="/image-compress" class="nav-item">图片压缩</router-link>
        <router-link to="/image-crop" class="nav-item">图片剪裁</router-link>
        <router-link to="/image-format" class="nav-item">格式转换</router-link>
        <router-link to="/watermark" class="nav-item">图片水印</router-link>
      </nav>
    </header>

    <main class="main">
      <h2 class="welcome-text">欢迎使用在线工具集</h2>
      <div class="tools-grid">
        <div class="tool-card" v-for="tool in tools" :key="tool.id" @click="navigateTo(tool.route)">
          <div class="tool-icon">
            <i :class="tool.icon"></i>
          </div>
          <h3 class="tool-title">{{ tool.name }}</h3>
          <p class="tool-desc">{{ tool.description }}</p>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const tools = ref([
  {
    id: 1,
    name: '文件转换',
    description: '支持多种文件格式转换',
    icon: 'el-icon-document',
    route: '/file-convert'
  },
  {
    id: 2,
    name: '图片压缩',
    description: '高效压缩图片体积',
    icon: 'el-icon-picture',
    route: '/image-compress'
  },
  {
    id: 3,
    name: '图片剪裁',
    description: '自由裁剪图片尺寸',
    icon: 'el-icon-crop',
    route: '/image-crop'
  },
  {
    id: 4,
    name: '格式转换',
    description: '图片格式快速转换',
    icon: 'el-icon-refresh',
    route: '/image-format'
  },
  {
    id: 5,
    name: '图片水印',
    description: '添加自定义水印',
    icon: 'el-icon-edit',
    route: '/watermark'
  }
])

const navigateTo = (route: string) => {
  router.push(route)
}
</script>

<style scoped>
.home {
  min-height: 100vh;
  background: #f5f7fa;
}

.header {
  background: #fff;
  padding: 1rem 2rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo h1 {
  color: #409EFF;
  margin: 0;
  font-size: 1.8rem;
}

.nav {
  display: flex;
  gap: 2rem;
}

.nav-item {
  color: #606266;
  text-decoration: none;
  font-size: 1.1rem;
  transition: color 0.3s;
}

.nav-item:hover {
  color: #409EFF;
}

.main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.welcome-text {
  text-align: center;
  color: #303133;
  margin-bottom: 3rem;
  font-size: 2rem;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.tool-card {
  background: #fff;
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.tool-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.tool-icon {
  font-size: 2.5rem;
  color: #409EFF;
  margin-bottom: 1rem;
}

.tool-title {
  color: #303133;
  margin: 0.5rem 0;
  font-size: 1.3rem;
}

.tool-desc {
  color: #909399;
  margin: 0;
  font-size: 0.9rem;
}
</style> 